import React, { Component } from 'react';
import { Tabs } from 'antd-mobile'
import "../../styles/Jiudian.scss"
import * as service from "../../api/index"

class Jiudian extends Component {
    state = {
        list: []
    }

    async componentDidMount() {
        var res = await service.jiudian_list()
        console.log(res.data.list);
        this.setState({ list: res.data.list })
    }
    render() {
        return (
            <div className='jiudian'>
                <div className="top">
                    <img src="https://cdn7.axureshop.com/demo/1212098/images/%E9%85%92%E5%BA%97/u3422.png" alt="" />
                    <div className="box">
                        <Tabs>
                            <Tabs.Tab title='国内' key='fruits'>
                                <div className="topp">
                                    <p>🔍  故宫东门 </p>
                                    <p>🈯当前位置</p>
                                </div>
                                <div className="zhong">
                                    <p>周二<br />06月20日</p>
                                    <p className='hh'>周三<br />06月21日</p>
                                    <p>每间<br />2成人0儿童</p>
                                </div>
                                <div className="xiaa">
                                    <p>试试搜索“网红酒店排行”</p>
                                </div>
                                <span>搜索酒店</span>
                            </Tabs.Tab>
                            <Tabs.Tab title='国际' key='vegetables'>
                                <div className="topp">
                                    <p>🔍  故宫东门 </p>
                                    <p>🈯当前位置</p>
                                </div>
                                <div className="zhong">
                                    <p>周二<br />06月20日</p>
                                    <p className='hh'>周三<br />06月21日</p>
                                    <p>每间<br />2成人0儿童</p>
                                </div>
                                <div className="xiaa">
                                    <p>试试搜索“网红酒店排行”</p>
                                </div>
                                <span>搜索酒店</span>
                            </Tabs.Tab>
                            <Tabs.Tab title='民宿' key='animals'>
                                <div className="topp">
                                    <p>🔍  故宫东门 </p>
                                    <p>🈯当前位置</p>
                                </div>
                                <div className="zhong">
                                    <p>周二<br />06月20日</p>
                                    <p className='hh'>周三<br />06月21日</p>
                                    <p>每间<br />2成人0儿童</p>
                                </div>
                                <div className="xiaa">
                                    <p>试试搜索“网红酒店排行”</p>
                                </div>
                                <span>搜索酒店</span>
                            </Tabs.Tab>
                        </Tabs>
                    </div>
                </div>

                <div className="xia">
                    <h2>热门推荐</h2>
                    <div className="list">
                        {
                            this.state.list.map((item, index) => {
                                return (
                                    <div className="one" key={index}>
                                        <img src={item.pic} alt="" />
                                        <h4>{item.name}</h4>
                                        <div className="xxx">
                                            <p>{item.money}</p>
                                            <span>{item.old_money}</span>
                                            <span>{item.mai}</span>
                                       </div>
                                    </div>
                                )
                            })
                        }
                    </div>
                </div>
            </div>
        );
    }
}

export default Jiudian;